<template>
  <div class="noticelist">
    <div class="noticelist-wrapper" :class="{'pc': PC}">
      <ul>
        <li class="noticelist-content border-1px" v-for="(item,$index) in noticeList" :key="$index" @click="openNotice(item)">
          <span class="icon-notice">公告</span>
          <div class="noticelist-message">{{item.title}}</div>
          <div class="time">{{item.start_time | onlyDate}}</div>
        </li>
      </ul>
      <div class="nomore-wrapper" v-if="noNotice">
        <div class="nomore-img">
          <img width="100%" height="100%" src="../../../assets/img/nomore@2x.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        noticeList: [],
        noNotice: false
      }
    },
    props: {
      loadUrl: {
        type: String
      }
    },
    methods: {
      getData() {
        this.$http.get(this.loadUrl).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.noticeList = response.data.data
            if (this.noticeList.length === 0) {
              this.eventBus.$emit('noMoreNotice', true)
              this.noNotice = true
            }
          }
        })
      },
      openNotice(item) {
        this.Indicator.open({
          text: '拼命加载中(⊙o⊙)...',
          spinnerType: 'fading-circle'
        })
        this.$router.push({path: '/notice', query: {id: item.id}})
      }
    },
    filters: {
      onlyDate(value) {
        value = value.replace(/-/g, '/')
        let year = new Date(value).getFullYear()
        let month = new Date(value).getMonth() + 1
        let day = new Date(value).getDate()
        if (month < 10) {
          month = `0${month}`
        }
        if (day < 10) {
          day = `0${day}`
        }
        return `${year}-${month}-${day}`
      }
    },
    created() {
      this.getData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .noticelist-wrapper
    position relative
    &.pc
      padding-bottom 1.28rem
    .nomore-wrapper
      width 100%
      height 100%
      .nomore-img
        margin 100px auto 100px auto
        width 329px
        height 308px
        img
          border-radius 0
    .noticelist-content
      display inline-flex
      width 100%
      box-sizing border-box
      padding-top 26px
      padding-bottom 20px
      border-1px(rgba(0, 0, 0, .2))
      &:last-child
        border-none()
      .icon-notice
        width 56px
        height 26px
        text-align center
        border 4px solid #2ECC40
        font-size 16px
        line-height 26px
        border-radius 4px
        color #2ECC40
        white-space nowrap
      .noticelist-message
        width 455px
        margin-left 15px
        font-size 28px
        color #666
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      .time
        position absolute
        right 0
        font-size 26px
        color #999
        white-space nowrap
</style>
